<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数字华容道</title>
  <script src="js/vue.global.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .container {
      text-align: center;
      width: 250px;
      background-color: #138b69;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    .title {
      font-size: 24px;
      margin-bottom: 20px;
      color: white;
      font-weight: bold;
    }
    .timer {
      font-size: 18px;
      margin-bottom: 20px;
      color: white;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 80px);
      grid-gap: 10px;
      justify-content: center;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    .cell {
      width: 80px;
      height: 80px;
      background-color: #b83713;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 8px;
      transition: background-color 0.2s, transform 0.2s;
      border: 2px solid black;
    }
    .cell:hover {
      background-color: #2d4cc5;
      transform: scale(1.1);
    }
    .empty {
      background-color: #3898ba;
      cursor: default;
      border: 2px solid black;
    }
    .button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: burlywood;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    .button:hover {
      background-color: sandybrown;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="title">{{ title }}</div>
      <div class="timer">剩余时间：{{ formattedTime }}</div>
      <ul class="grid">
        <li v-for="(cell, index) in grid" :key="index" :class="['cell', { empty: cell === '' }]"
            @click="cell !== '' && move(index)">
          {{ cell }}
        </li>
      </ul>
      <button class="button" @click="shuffle">开始游戏</button>
    </div>
  </div>
  <script>
	Vue.createApp({
	  data() {
		return {
		  title: '数字华容道',
		  grid: [1, 2, 3, 4, 5, 6, 7, 8, ''],
		  timeLeft: 300, // 5分钟，单位秒
		  timer: null,
		  gameOver: false,
		  startTime: null, // 记录游戏开始时间
		};
	  },
	  computed: {
		formattedTime() {
		  const minutes = Math.floor(this.timeLeft / 60);
		  const seconds = this.timeLeft % 60;
		  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
		}
	  },
	  methods: {
		shuffle() {
		  let newGrid = this.grid.slice();
		  for (let i = newGrid.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			const temp = newGrid[i];
			newGrid[i] = newGrid[j];
			newGrid[j] = temp;
		  }
		  this.grid = newGrid;
		  this.startTime = Date.now(); // 记录游戏开始时间
		  this.startTimer(); // 开始计时
		},
		move(index) {
		  if (this.gameOver) return; // 如果游戏结束，不再响应点击
		  const emptyIndex = this.grid.indexOf('');
		  const validMoves = [
			emptyIndex - 3, emptyIndex + 3, emptyIndex - 1, emptyIndex + 1
		  ];
		  if (validMoves.includes(index)) {
			const temp = this.grid[emptyIndex];
			this.grid[emptyIndex] = this.grid[index];
			this.grid[index] = temp;
			this.checkWin(); // 检查是否完成游戏
		  }
		},
		startTimer() {
		  this.timeLeft = 300; // 重置时间
		  this.gameOver = false; // 重置游戏状态
		  if (this.timer) clearInterval(this.timer); // 清除之前的计时器
		  this.timer = setInterval(() => {
			this.timeLeft--;
			if (this.timeLeft <= 0) {
			  clearInterval(this.timer);
			  this.gameOver = true;
			  alert('挑战失败！');
			}
		  }, 1000);
		},
		checkWin() {
		  const winGrid = [1, 2, 3, 4, 5, 6, 7, 8, ''];
		  if (this.grid.toString() === winGrid.toString()) {
			clearInterval(this.timer);
			const endTime = Date.now(); // 记录通关时间
			const timeUsed = Math.floor((endTime - this.startTime) / 1000); // 计算通关所用时间（秒）
			alert(`恭喜你，挑战成功！您使用了 ${timeUsed} 秒通过了挑战。`);
			this.gameOver = true;
		  }
		}
	  }
	}).mount('#app');
  </script>
</body>
</html>